<template>



    <el-popover
        
     
        :width="200"
        trigger="hover"
       
      >
        <template #reference>
         
          <div class="icone" :class="data.length==0?'':'active'">
            <el-icon><Filter /></el-icon>
          </div>
       </template>
          <!-- <el-select-v2
          :teleported ='false'
    v-model="data"
    multiple
          collapse-tags
          collapse-tags-tooltip
    filterable
    :options="options"
    placeholder="请选择"
    :style="selectWidth"
    size="small"
  >
 
</el-select-v2> -->

        
            <el-select
               :teleported ='false'
               size="small"
               multiple
               filterable
          collapse-tags
          collapse-tags-tooltip
                v-model="data"  placeholder="">
            <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
                    </el-select> 
     
    
    
      </el-popover>
    
       </template>
       
       <script setup>
      
    import { ref, onMounted,defineProps,watch,defineEmits } from "vue";
       let props = defineProps({
        options:{
            type:Array,
            default:()=> [],
        }
       })
    
    let emit = defineEmits(['chooseItem'])
    let options = ref([])
    let data = ref([])
    watch(data,(newV)=>{
      
      emit('chooseItem',newV)
    },{immediate:true})
    
    let activeWidth = ref(200)
    let selectWidth = ref('width:180px')
    watch(props,(newV)=>{
        // console.log(newV.options)
        // if(newV.options.length > 190){
        //   activeWidth.value = 800
        //   selectWidth.value = `--Mywidth:${activeWidth.value - 40}px`
        //   console.log( document.querySelector('.el-vl__window'))
        //   document.querySelector('.el-vl__window').style.width = '--Mywidth'
        // }
        options.value = newV.options
    },{immediate:true})
    
    </script>
       
       <style scoped>
       .icone{
        display: flex;
        align-items: center;
        justify-content: center;
       }
       .active{
        color: rgb(24, 144, 255);
       }
       </style>
       